<template>
    <div style="text-align:left;">
        <el-form :model="form">
            <div id="BzAgent">
                <a class="BzAgent_logo" href=""></a>
                <div class="cle"></div>
            </div>
            <div class="banner">
                <ul class="piclist"></ul>
                <div class="BzAgent_login">
                    <h2>代理商管理平台</h2>
                    <div class="form">
                        <div class="login_name">
                            <el-input v-model="formData.username" style="height:28px;border:none;" class="name" type="text"
                                placeholder="请输入用户名"></el-input>
                        </div>
                        <div class="login_pwd">
                            <el-input v-model="formData.password" type="password" class="pwd" placeholder="请输入密码" />
                        </div>
                        <div class="login_help">
                            <label>
                                <input name="login_remember" type="checkbox" />
                                记住帐号</label><span><a href="javascript:;"> 忘记密码？</a></span>
                        </div>
                        <el-button type="success" class="submit btn"  @click="eventLogin"
                            style="width: 270px;height: 40px; margin-top: 20px;">登录</el-button>
                    </div>
                </div>
            </div>
        </el-form>

        <!-- <el-input v-model="form.userName"></el-input>
        <el-input v-model="form.password"></el-input>
        <el-input v-show="showVc" v-model="vc"></el-input>
        <el-button>登录</el-button>
        {{ phone }} === 180****5751
        {{ showIsLogin }} -->
    </div>
</template>

<script>
export default {
    data() {
        return {
            showIsLogin: '已登录',
            vc: '验证码',
            showVc: false,
            form: {
                userName: '',
                password: ''
            },
            formData: {
                username: '',
                password: ''
            },
            count: 0,
            phone: '18016435751',
        }
    },
    created() {
        //模拟登录后，将登录的用户信息放到localStorage
        //localStorage.setItem("userinfo","max")

        /*
            //打开登录页面时，如果已登录且未过期，则不用登录
            let u = localStorage.getItem('userid')
            let t = localStorage.getItem('exptime')//登录成功的时候，记录的时间

            if (u == null) {
                this.showIsLogin = '用户还未登录'
            }
            else {
                //登录了，还需要判断用户是否过期
                //是否过期，是之前登录的时间和现在的时间进行比较
                //假设是2分钟的过期时间
                let e = 1  //是指分钟
                let c = new Date() * 1 //当前时间
                if (new Date(t) * 1 + e * 60 * 1000 < c) {
                    this.showIsLogin = '已过期，请重新登录'
                }else{
                    this.$router.push('/product/list')
                }
            }
        */
    },
    methods: {
        //登录事件
        eventLogin() {

            
            let url = this.$baseUrl + '/member/login'
            let data = {
                "name": this.formData.username,
                "password": this.formData.password
            }
            if (this.count >= 3) {
                this.$message.error('对不起，连续输入密码错误超过3次，账户已锁定')
                return
            }
            this.$http.post(url, data).then(res => {
                this.$message.info(res.data.message)
                if (res.data.code == 200) {
                    //console.log('1')
                    //setItem要求放入的值是字符串，所以需要将json对象转换为字符串
                    localStorage.setItem('2010a_login_info', JSON.stringify(res.data.data) )
                    
                    this.$router.push('/product/list')

                } else {
                    this.count++
                    if (this.count >= 3) {
                        this.$message.error('对不起，连续输入密码错误超过3次，账户已锁定')
                        return
                    }

                }
            })
        }
    }
}
</script>

<style scoped>
body {
    background: #fff
}

body {
    margin: 0px;
    padding: 0px;
    font-family: "microsoft yahei", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #333333
}

* {
    margin: 0;
    padding: 0;
    outline: none;
    border: 0
}

#BzAgent {
    width: 1060px;
    margin: 0 auto
}

ul,
ol,
li {
    list-style: none
}

.BzAgent_logo {
    background: url(@/assets/images/logo.png) no-repeat;
    width: 197px;
    height: 72px;
    float: left;
    margin-top: 25px
}

.cle {
    clear: both;
    height: 0;
    font-size: 0
}

.banner {
    width: 100%;
    height: 400px;
    position: relative
}

.piclist {
    width: 100%;
    height: 400px;
    border-top: 8px solid #d3d3d3;
    border-bottom: 8px solid #d3d3d3;
    background: url(@/assets/images/log_bg2.jpg) no-repeat
}

.BzAgent_login {
    width: 343px;
    height: 343px;
    float: right;
    background: url(@/assets/images/bzagent_login.png) no-repeat;
    position: absolute;
    left: 63%;
    top: 40px;
    z-index: 999
}

.BzAgent_login h2 {
    color: #242424;
    font-size: 16px;
    font-weight: normal;
    margin: 28px 0 0 0;
    text-align: center
}

.form {
    margin: 30px 0 0 40px
}

.login_name {
    background: url(@/assets/images/logo_name.jpg);
    width: 270px;
    height: 32px;
    text-indent: 2.5em;
    padding-top: 6px
}

.login_name input,
.login_pwd input {
    width: 230px;
    line-height: 28px;
    -webkit-box-shadow: 0 0 0px 1000px white inset
}

input,
button,
select,
textarea {
    outline: none;
    font-family: "微软雅黑";
    border: 0
}

.login_pwd {
    background: url(@/assets/images/logo_psw.jpg);
    width: 270px;
    height: 32px;
    text-indent: 2.5em;
    padding-top: 6px;
    margin-top: 20px
}

.login_help {
    margin-top: 15px
}

.login_help a {
    color: #666;
    float: right;
    padding-right: 30px;
    text-decoration: none
}

#btn_Login {
    background: #28c09a;
    width: 270px;
    height: 36px;
    margin: 15px 0 10px 0;
    color: #fff;
    font-size: 16px;
    line-height: 36px;
    cursor: pointer;
    border-radius: 3px
}

.BzAgent_main {
    width: 1060px;
    margin: 40px auto 0;
    overflow: hidden
}

.BzAgent_main_left {
    width: 270px;
    float: left
}

.bot_sp {
    color: #333;
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 10px
}

.con_d {
    width: 100%;
    line-height: 28px;
    font-size: 14px;
    color: #666;
    margin-bottom: 20px
}

img {
    border: 0
}

.con_sp {
    overflow: hidden;
    float: left;
    line-height: 22px;
    color: #888;
    font-size: 12px
}

.csw_01 {
    width: 72px;
    text-align: center;
    margin-right: 60px
}

.BzAgent_main_mid {
    width: 300px;
    float: left;
    margin-left: 40px
}

.bot_sp {
    color: #333;
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 10px
}

.con_d {
    width: 100%;
    line-height: 28px;
    font-size: 14px;
    color: #666;
    margin-bottom: 20px
}

.BzAgent_main_right {
    width: 350px;
    float: right
}

.BzAgent_news h3 {
    font-weight: normal;
    color: #333;
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 5px;
    padding-bottom: 5px;
    background: url(@/assets/images/news_tb.jpg) 0 5px no-repeat;
    padding-left: 25px
}

.BzAgent_news li {
    width: 100%;
    float: left;
    display: block;
    background: url(@/assets/images/crm_login_tb.jpg) 4px 15px no-repeat;
    text-indent: 1.2em;
    line-height: 32px
}

.BzAgent_news li a {
    color: #000;
    text-decoration: none
}

.BzAgent_time {
    float: right;
    color: #999
}

.copyrights {
    text-indent: -9999px;
    height: 0;
    line-height: 0;
    font-size: 0;
    overflow: hidden;
}

.name,
.pwd {
    line-height: 28px;
    height: 28px;
    width: 225px;
    border: none;
    float: left;
}

.el-input>input {
    height: 28px;
    border: none;
    padding: 0;
}
.name>input{
    height: 28px;
    border:none;
}
</style>